<template>
  <div style="margin:  24px 0 ">
    <!-- 业务提成 -->
    <a-row>
      <a-col
        :offset="16"
        :md="8">
        <div style="float: right; margin: 0 60px 20px 0;">
          <a-button
            @click="handleEdit"
            v-if="!isEdit"
            style="margin-right: 10px">编辑</a-button>
          <a-button
            @click="() => { this.isEdit = false }"
            v-if="isEdit"
            style="margin-right: 10px">取消</a-button>
          <a-button
            type="primary"
            @click="handleSubmit">提交</a-button>
        </div>
      </a-col>
    </a-row>
    <!-- 生产提成 -->
    <a-card :title="title">
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">合同额</a-card-grid>

      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">策划组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">UI设计、动效创意组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">程序组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">内容组(定制软件)奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">硬件开发组(定制硬件)奖金</a-card-grid>

      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoney"
              placeholder="请输入合同额(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoney) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward[0]) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward[1]) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward[2]) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward[3]) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward[4]) }}</a-card-grid>
    </a-card>
  </div>
</template>
<script>
import { showRate, showMonney } from './config'
import { message } from 'ant-design-vue'

export default {
  name: 'SCDemoCard',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    prodConfig: {
      type: Object,
      default: () => {}
    }
  },
  mounted () {
    if (this.prodConfig.statusRates.filter(i => i).length > 4) {
      this.reward = this.prodConfig.statusRates.map(i => (i * 100000).toFixed(2))
    }
  },
  data () {
    this.showRate = showRate
    this.showMonney = showMonney
    return {
      isEdit: false,
      // 生产部分
      rewardRate: 10,
      inputcontractMoney: 0,
      contractMoney: 100000,
      reward: [undefined, undefined, undefined, undefined]
    }
  },
  methods: {
    handleEdit () {
      if (this.prodConfig.statusRates.filter(i => i).length > 4) {
        this.isEdit = true
        this.inputcontractMoney = this.contractMoney
      } else {
        message.error('需要配置好规则')
      }
    },
    handleSubmit () {
      if (this.isEdit) {
        const contractMoney = this.inputcontractMoney

        this.reward = this.prodConfig.statusRates.map(i => (i * contractMoney).toFixed(2))
        this.isEdit = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-input-number {
  width: 100%;
}
/deep/.ant-input-number-handler-wrap {
  display: none;
}
</style>
